<template>
	<view class="crm">
		<!-- <u-sticky> -->
		<view class="tops1">
			<view class="searchBox">
				<view class="search">
					<view class="inp">
						<u-search @change="changeInpFn" :clearabled="true"  @clear="search" @search="search" bg-color="#fff" :show-action="false" height="60" search-icon=""
							placeholder-color="rgba(15, 20, 23, 0.3)" placeholder="请输入要查询的内容" v-model="keyword">
						</u-search>
					</view>
					<view class="btns" @click="search">
						搜索
					</view>
				</view>
				<image @click="show=true" class="Scan-code"
					src="https://oss.6mate.cn/mini/Calendar.png" mode="">
				</image>
			</view>

		</view>
		<!-- </u-sticky> -->
		<view v-if="list1.length" class="list" :style="{'padding-top': paddingTop}">
			<view class="item" v-for="(item,index) in list1">
				<view class="time">
					{{item.genTime}}
				</view>
				<view v-if="item.speechType=='TEXT'" class="detail">
					<view class="photo">
						{{item.speechCategoryName}}
					</view>
					<view class="info">
						<view class="top">
							<u-parse :html="item.content"></u-parse>

						</view>
						<view @click="copyTextToClipboard(item.content)" class="btn">
							<image src="https://oss.6mate.cn/mini/copyBnts.png" mode=""></image>
							快捷复制
						</view>
					</view>
				</view>
				<view v-else class="imgs">
					<view class="photo">
						{{item.speechCategoryName}}
					</view>
					<view class="info">
						<view class="img">
							<view class="imgBox">
									<image class="contentAimg" :src="item.imageUrl" mode="widthFix"/>
							
							
								<!-- <img style="width: 100%; display: block;" :src="item.imageUrl" alt=""> -->
								<u-upload class="uploadImg" :disabled="false" :deletable="false" 
									:show-progress="false" :max-count="1" :file-list="[{url:item.imageUrl}]"></u-upload>
								<!-- <image :src="item.imageUrl" mode=""></image> -->
							
							</view>
							
							</view>
						<view @click="download(item.imageUrl)" class="btn">
							<image src="https://oss.6mate.cn/mini/To-bottom.png" mode=""></image>
							快捷下载
						</view>
					</view>
				</view>

			</view>
			<!-- <uni-load-more :status="status"></uni-load-more> -->
		</view>
		<view v-else class="empty" style="padding-top: 150px;">
			<view v-if="!list1.length && senDate" class="emptyAddress-box">
				<u-empty text="暂无内容" mode="news"></u-empty>
			</view>
		</view>

		<u-calendar active-bg-color="#FA4A53" btn-type="error" range-color="rgba(250, 74, 83, 0.4)" active-color="#fff"
			v-model="show" mode="date" @change="change"></u-calendar>


	</view>
</template>

<script>

	export default {

		data() {
			return {
				show: false,
				total: null, //总共多少条数据
				formData: {
					pageSize: 10, //每页10条数据
					page: 1, //第几页
					topic: "",
				},
				status: "more",
				senDate: false,
				list1: [],
				keyword: '',
				date: '',
				speechCategoryId: '',
				paddingTop: ''
			}
		},

		onLoad(e) {
			this.speechCategoryId = e?.id
			uni.setNavigationBarTitle({
				title: e.title
			});
			this.getlist()
			this.getHieght()
		},
		
		onPullDownRefresh() {
			let allTotal = this.formData.page * this.formData.pageSize;
			if (allTotal < this.total) {
				//当前条数小于总条数 则增加请求页数
				this.status = "loading"; //加载中状态
				this.formData.page++;
				this.getlist();
			} else {
				this.status = "noMore"; //加载完状态
				uni.stopPullDownRefresh()
				console.log("已加载全部数据");
				uni.showToast({
					icon:"",
					title:"已加载全部数据"
				})
			}
		},
		// onReachBottom() {
		// 	let allTotal = this.formData.page * this.formData.pageSize;
		// 	if (allTotal < this.total) {
		// 		//当前条数小于总条数 则增加请求页数
		// 		this.status = "loading"; //加载中状态
		// 		this.formData.page++;
		// 		this.getlist();
		// 	} else {
		// 		this.status = "noMore"; //加载完状态
		// 		console.log("已加载全部数据");
		// 	}
		// },
		methods: {
			changeInpFn(e){
				
				if(e==''){
					this.formData.page = 1;
					this.getlist('fresh');
				}
				
			},

			download(imageUrl) {
				
				uni.showToast({
					title: "下载中",
					icon: "loading"
				})
				uni.downloadFile({
					url: imageUrl,
					success: downloadResult => {
						if (downloadResult.statusCode === 200) {
							// 下载成功，保存图片到系统相册
							uni.saveImageToPhotosAlbum({
								filePath: downloadResult.tempFilePath,
								success: () => {
									uni.showToast({
										title: '图片保存成功'
									});
								},
								fail: () => {
									uni.showToast({
										title: '图片保存失败',
										icon: 'none'
									});
								}
							});
						} else {
							uni.showToast({
								title: '图片下载失败',
								icon: 'none'
							});
						}
					},
					fail: () => {
						uni.showToast({
							title: '图片下载失败',
							icon: 'none'
						});
					}
				});

			},

			copyTextToClipboard(text) {
				uni.setClipboardData({
					data: text,
					success: function() {
						console.log('复制成功');
						// 可以添加用户友好的提示，例如使用uni.showToast提示复制成功
						uni.showToast({
							title: '复制成功',
							icon: 'none',
							duration: 2000,
						});
					},
					fail: function() {

						// 可以添加错误处理或用户友好的提示
					}
				});
			},
			change(e) {
				console.log(e, 3333);
				this.date = e.result

				this.formData.page = 1
				this.list1 = []
				this.getlist();
			},
			getHieght() {
				uni.createSelectorQuery().select('.tops1').boundingClientRect((rect) => {
					console.log(rect.height, 66666);
					this.paddingTop = rect.height + 12 + 'px'
				}).exec()
			},



			search() {
				this.formData.page = 1
				this.list1 = []
				this.getlist();
			},

			getlist() {
				this.senDate = false;
				let query = {
					pageIndex: this.formData.page,
					pageSize: this.formData.pageSize,
					keyword: this.keyword,
					date: this.date,
					speechCategoryId: this.speechCategoryId //卡类型ID列表	
				}

				this.$u.api
					.speechPage(query)
					.then((res) => {
						this.senDate = true;
						if (res.code == 'ok') {
							this.total = res.data.entityCount;
							const newlist = res.data.entities;
							this.list1.unshift(...newlist);
							if (this.list1.length < this.formData.pageSize) {
								this.status = "noMore"; //加载完状态
							}
						} else {

						}
						uni.stopPullDownRefresh()
						uni.hideLoading();
					});
			}
		}
	}
</script>

<style>
	page {
		background: #F6F6F6;
	}
</style>
<style scoped lang="scss">
	::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
		display: none;
	}
	
	.crm {
		padding: 0;

		/deep/ .u-list-item {
			margin: 0 !important;
			border-radius: 8rpx 8rpx 0 0 !important;
		}

		/deep/ .u-preview-image {
			border-radius: 8rpx 8rpx 0 0 !important;
		}

		.toAppBox {
			margin: 0 auto;
			width: 670rpx;
			background: #FFFFFF;
		}

		.tops1 {
			background: #FFFFFF;
			padding: 0 32rpx 0;
			position: fixed;
			left: 0;
			top: 0;
			right: 0;
			z-index: 9;
		}

		.list {
			margin-top: -24rpx;
			padding-bottom:80rpx;
			.item {
				padding: 0 40rpx 0 32rpx;

				.time {
					padding: 24rpx 0;
					text-align: center;
					font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
					font-weight: 400;
					font-size: 24rpx;
					color: rgba(15, 20, 23, 0.6);
					line-height: 28rpx;
				}

				.imgs {
					// width: 280rpx;
					// height: 498rpx;
					border-radius: 8rpx 8rpx 0rpx 0rpx;
					display: flex;
					align-items: flex-start;
					overflow: hidden;

					.photo {
						margin-right: 40rpx;
						font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
						font-weight: 500;
						font-size: 20rpx;
						color: #FFFFFF;
						line-height: 30rpx;
						width: 72rpx;
						height: 72rpx;
						background: #FA4A53;
						border-radius: 50rpx 50rpx 50rpx 50rpx;
						display: flex;
						align-items: center;
						justify-content: center;
					}

					.info {
						flex: 1;
						// width: 280rpx;
						border-radius: 8rpx 8rpx 0rpx 0rpx;
						background: #FFFFFF;

						.img {
							position: relative;
							.imgBox{
								width: 50%;
								margin: 30rpx auto 0;
								image {
									width: 100%;
									border-radius: 8rpx 8rpx 0rpx 0rpx;
									// width: 280rpx;
									// height: 498rpx;
								}
								.uploadImg{
									position: absolute;
									left: 0;
									top: 0;
									right: 0;
									bottom: 0;
									background: palegoldenrod;
									opacity: 0;
									/deep/ .u-list-item {
										position: absolute !important;
										top: 0;
										bottom: 0;
										right: 0;
										left: 0;
										width: 100% !important;
										height: 100% !important;
									}
								}
								
							}
							
						}

						.btn {
							display: flex;
							align-items: center;
							justify-content: center;
							font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
							font-weight: 400;
							font-size: 28rpx;
							color: #FA4A53;
							line-height: 40rpx;
							padding: 20rpx 0;

							image {
								width: 32rpx;
								height: 32rpx;
								margin-right: 8rpx;
							}
						}
					}
				}

				.detail {
					display: flex;
					align-items: flex-start;

					.photo {
						margin-right: 40rpx;
						font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
						font-weight: 500;
						font-size: 20rpx;
						color: #FFFFFF;
						line-height: 30rpx;
						width: 72rpx;
						height: 72rpx;
						background: #FA4A53;
						border-radius: 50rpx 50rpx 50rpx 50rpx;
						display: flex;
						align-items: center;
						justify-content: center;
					}

					.info {
						flex: 1;

						border-radius: 8rpx 8rpx 8rpx 8rpx;
						background: #FFFFFF;

						.top {
							padding: 20rpx 20rpx 0;
							border-bottom: 2rpx solid #F6F6F6;
							text-align: justify;
							color: rgba(15, 20, 23, 0.7);
							font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
							font-weight: 400;
							font-size: 28rpx;
							line-height: 40rpx;
						}

						.btn {
							display: flex;
							align-items: center;
							justify-content: center;
							font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
							font-weight: 400;
							font-size: 28rpx;
							color: #FA4A53;
							line-height: 40rpx;
							padding: 20rpx 0;

							image {
								width: 32rpx;
								height: 32rpx;
								margin-right: 8rpx;
							}
						}
					}
				}
			}
		}



		.searchBox {
			margin-bottom: 24rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.Scan-code {
				width: 48rpx;
				height: 48rpx;
				margin-left: 20rpx;
			}
		}

		.search {
			flex: 1;

			height: 64rpx;
			background: #FFFFFF;
			border-radius: 152rpx 152rpx 152rpx 152rpx;
			border: 2rpx solid #FA4A53;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.inp {
				flex: 1;
			}

			.btns {
				display: flex;
				align-items: center;
				justify-content: center;
				font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
				font-weight: 400;
				font-size: 24rpx;
				color: #FFFFFF;
				line-height: 40rpx;
				margin: 4rpx;
				width: 128rpx;
				height: 56rpx;
				background: #FA4A53;
				border-radius: 152rpx 152rpx 152rpx 152rpx;
			}
		}

	}
</style>
